<template>
	<el-form label-width="100px">
		<el-form-item label="题目类型">
			<h3>{{question.questionType}}</h3>
		</el-form-item>
		<el-form-item label="难度等级">
			<h3>{{question.difficultyLevel}}</h3>
		</el-form-item>
		<el-form-item label="题干">
			<h3>{{question.questionText}}</h3>
		</el-form-item>
		<el-form-item label="选项" v-if="question.questionType === '选择'">
			<ol type="A" style="margin-left: 50px;">
				<li>{{question.optionA}}</li>
				<li>{{question.optionB}}</li>
				<li>{{question.optionC}}</li>
				<li>{{question.optionD}}</li>
			</ol>
		</el-form-item>
		<el-form-item label="答案">
			<h3>{{question.correctAnswer}}</h3>
		</el-form-item>
		<el-form-item v-if="question.answer" label="用户回答">
			<h3>{{question.answer}}</h3>
			<div class="answer">
				<el-tag type="success" v-if="question.active === 1">回答正确</el-tag>
				<el-tag type="danger" v-else-if="question.active === 0">回答错误</el-tag>
				<el-tag type="warning" v-else>无法判断</el-tag>
			</div>
		</el-form-item>
		<el-form-item label="问题解析">
			<h3>{{question.analysis}}</h3>
		</el-form-item>
		
	</el-form>
</template>

<script setup>
const prop = defineProps(['question'])
let active = 0
init()
const question = {...prop.question, active}
function init () {
	if (prop.question.questionType === '简答') {
		active = 2
		return
	}
	if (prop.question.userAnswer === prop.question.correctAnswer) {
		active = 1
	} else {
		active = 0
	}
}
</script>

<style scoped lang="scss">
.answer {
	.el-tag {
		font-size: 2rem;
	}
}
</style>